<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>

<style>
    .button {
        padding: 2px 8px;
        margin: -2px;
        text-align: center;
        text-decoration: none;
        color: #2194E0;
        border: 2px solid #2194E0;
        font-size: 16px;
        display: inline-block;
        border-radius: 0.3em;
        transition: all 0.2s ease-in-out;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .button:before {
        content: "";
        background-color: rgba(255,255,255,0.5);
        height: 100%;
        width: 3em;
        display: block;
        position: absolute;
        top: 0;
        left: -4.5em;
        transform: skewX(-45deg) translateX(0);
        transition: none;

    }
    .button:hover {
        background-color: #2194E0;
        color: #fff;
    }

    .button:hover {
        border-bottom: 4px solid darken(#2194E0, 10%);
    }

    .button:hover:before {
        transform: skewX(-45deg) translateX(13.5em);
        transition: all 0.5s ease-in-out;
    }
    .changepage{
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        border-radius: 5%;
        margin: 4px 2px;
        cursor: pointer;

        webkit-transition-duration: 0.4s;
        /* Safari */ transition-duration:0.4s;
    }
    .changepage:hover{
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }
    .turnpage{
        background-color: white;
        border: none;
        color: #4CAF50;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        border-radius: 5%;
        margin: 4px 2px;
        cursor: pointer;
        webkit-transition-duration: 0.4s;
        /* Safari */ transition-duration:0.4s;
    }
    .turnpage:hover{
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }
    .nowpage{
        background-color: white;
        border: none;
        color: #4CAF50;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        border-radius: 5%;
        margin: 4px 2px;
        webkit-transition-duration: 0.4s;
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }
    .logo h4{
        color:#fff;
        text-transform:uppercase;
        font-size:6em;
        font-family: 'bebas_neueregular';
    }
</style>

<head>
    <title>虎蜂电子商务管理平台</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/table.css" rel="stylesheet" type="text/css" media="all" />
    <script language="JavaScript" type="application/javascript">
        function confirm_del(id, loc, mctid, pagenum){
            if(confirm("确定要下架这件商品吗？")){
                location.href = "mcddel?id="+ id +"&loc="+ loc +"&mctid="+ mctid +"&pagenum="+ pagenum;
            }
        }
    </script>
</head>
<body>
<div class="wrap-box"> </div>
<div class="header">
    <div class="wrap">
        <div class="header-top">
            <div class="cssmenu">
                <ul>
                    <li><a href="home?username=${username}"><span>Home</span></a></li>
                    <li><a href="merchant?username=${username}&pagenum=1"><span>Merchant</span></a></li>
                    <li class="active"><a href="merchandise?username=${username}&pagenum=1"><span>Merchandise</span></a></li>
                    <li class="active"><a href="mcdupdate.jsp?id=${merchandise.id}&username=${username}&pagenum=${page.num}"><span>Update</span></a></li>
                    <a href="index.jsp"><img : style="position: absolute;right: 200px; top: 20px" src ="image/goback.png" /></a>
                    <div class="clear"></div>
                </ul>
            </div>
            <div class="logo">
                <h4><img style="width: 138.6px;height: 106px" src ="image/logo.png" />虎蜂</h4>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<div class="main">
    <div class="wrap">
        <div class="about-top">
            <div class="about">
                <div class="map">
                </div>
                <img src ="image/mcdupdate1.jpeg" />
                <div class="contact">
                    <div class="col1 span_1_of_contact">
                        <div class="contact-form">
                            <h3>商品修改 : ${merchandise.id}</h3>
                            <form action="mcdupdate" method="post">
                                <input type="hidden" name="id" value="${merchandise.id}"/>
                                <input type="hidden" name="mctid" value="${merchandise.mctid}"/>
                                <input type="hidden" name="pagenum" value="${page.num}"/>
                                <div>
                                    <span><label>商品名称</label></span>
                                    <span><input class="textbox" type="text" name="name" value="${merchandise.name}"/></span>
                                </div>
                                <div>
                                    <span><label>商品售价</label></span>
                                    <span><input class="textbox" type="text" name="price" value="${merchandise.price}"/></span>
                                </div>
                                <div>
                                    <span><label>剩余数量</label></span>
                                    <span><input class="textbox" type="text" name="num" value="${merchandise.num}"/>
                                    </span>
                                </div>
                                <div>

                                    <span><label>商品展示图（路径）</label></span>
<%--                                    value="${merchandise.url}"--%>
                                    <span><input class="textbox" type="text" name="url"/>
                                    </span>
                                </div>
                                <div>
                                    <input class="btn" type="submit" value="Submit"/>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col1 span_2_of_contact">
                        <div class="contact-form">
                            <h3>商品列表</h3>
                            <div>
                                <div>
                                    <c:if test="${page.num>1}">
                                        <button class="changepage"
                                                onclick="location.href='mcdupdate?id=${merchandise.id}&username=${username}&pagenum=${page.num-1}'">上一页</button>
                                    </c:if>
                                    <button class="turnpage"
                                            onclick="location.href='mcdupdate?id=${merchandise.id}&username=${username}&pagenum=1'"><<</button>
                                    <c:if test="${page.num>2}">
                                        <c:if test="${page.num>3}">......</c:if>
                                        <button class="turnpage"
                                                onclick="location.href='mcdupdate?id=${merchandise.id}&username=${username}&pagenum=${page.num-2}'">${page.num-2}</button>
                                    </c:if>
                                    <c:if test="${page.num>1}">
                                        <button class="turnpage"
                                                onclick="location.href='mcdupdate?id=${merchandise.id}&username=${username}&pagenum=${page.num-1}'">${page.num-1}</button>
                                    </c:if>
                                    <button class="nowpage">${page.num}</button>
                                    <c:if test="${page.num<page.maxnum}">

                                        <button class="turnpage"
                                                onclick="location.href='mcdupdate?id=${merchandise.id}&username=${username}&pagenum=${page.num+1}'">${page.num+1}</button>

                                    </c:if>
                                    <c:if test="${page.num<page.maxnum-1}">
                                        <button class="turnpage"
                                                onclick="location.href='mcdupdate?id=${merchandise.id}&username=${username}&pagenum=${page.num+2}'">${page.num+2}</button>
                                        <c:if test="${page.num<page.maxnum-2}">......</c:if>
                                    </c:if>
                                    <button class="turnpage"
                                            onclick="location.href='mcdupdate?id=${merchandise.id}&username=${username}&pagenum=${page.maxnum}'">>></button>
                                    <c:if test="${page.num<page.maxnum}">
                                        <button class="changepage"
                                                onclick="location.href='mcdupdate?id=${merchandise.id}&username=${username}&pagenum=${page.num+1}'">下一页</button>
                                    </c:if>
                                </div>
                                <table class="altrowstable">
                                    <tr>
                                        <th></th><th>商品展示图</th><th>商品号</th><th>商品名称</th><th>售价</th>
                                        <th>剩余数量</th><th>所属店铺</th><th>操作</th>
                                    </tr>
                                    <c:forEach items="${list}" begin="${page.num*10-10}" end="${page.num<page.maxnum?page.num*10-1:page.total-1}" var="it" varStatus="status">
                                        <tr>
                                            <td>${status.index + 1}</td>
                                            <td><img style="width: 100px;height: 100px" src ="${it.url}" /></td>
                                            <td>${it.id}</td>
                                            <td>${it.name}</td>
                                            <td>${it.price}</td>
                                            <td>${it.num}</td>
                                            <td>${it.mctid}</td>
                                            <td>
                                                <script> const LOC = "update";</script>
                                                <button class="button"
                                                        onclick="confirm_del(${it.id},LOC,${merchandise.mctid},${page.num})">下架</button>
                                                &nbsp;&nbsp;
                                                <button class="button"
                                                        onclick="location.href='mcdupdate?id=${it.id}&username=${username}&pagenum=${page.num}'">修改</button>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <img src ="image/mcdupdate2.jpeg" />
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="copy">
        <p>Copyright© 2022 虎蜂电子商务管理平台 20206769 陆天佑</p>
    </div>
</div>

</body>
</html>